<template>
  <div class="overview-content">
    <el-row>
      <el-col :span="16" style="margin-bottom: 20px">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="8" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6">
              <el-input
                v-model="listQuery.keyword"
                placeholder="请输入搜索内容"
                class="btnScr"
                :xs="24"
                :sm="12"
                :lg="16"
              />
            </el-col>
            <el-col :xs="24" :sm="8" :lg="4">
              <el-date-picker
                v-model="listQuery.remindDateBegin"
                type="date"
                placeholder="请选日期"
                style="width: 100%"
                @change="screen"
              />
            </el-col>
            <el-col :xs="24" :sm="8" :lg="4">
              <el-select
                v-model="listQuery.status"
                placeholder="请选择状态"
                class="btnScr"
                @change="screen"
                clearable
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="10">
              <el-button type="primary" @click="screen">筛选</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div style="height: 10px" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="tableData"
            style="width: 100%"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column prop="num" label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="remindDate"
              label="提醒日期"
              align="center"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{ formatAll(scope.row.remindDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="content"
              label="消息内容"
              width="350"
              align="center"
            >
              <template slot-scope="scope">
                <p style="white-space: pre-wrap">{{ scope.row.content }}</p>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip
              label="地址"
              prop="address"
              min-width="300"
              align="center"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    path: '/house/pageDetail',
                    query: { id: scope.row.houseId },
                  }"
                  class="linkBtn"
                >
                  {{ scope.row.address }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="sender"
              label="发送人"
              width="150"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="receiver"
              label="接收人"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-for="item in scope.row.receiver.split(' ')" :key="item">
                  {{ item }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="status"
              label="状态"
              width="80"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ statusTxt[scope.row.status] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="scope.row.status === 0"
                  type="text"
                  size="small"
                  class="linkBtn"
                  @click="processedBtn(scope.row, scope.$index)"
                  >已处理</el-button
                >
                <el-button
                  v-show="scope.row.status === 0"
                  type="text"
                  size="small"
                  class="linkBtn"
                  @click="next(scope.row.id)"
                  >下次提醒</el-button
                >
                <el-button
                  v-show="scope.row.status === 1"
                  class="btn linkBtn"
                  type="text"
                  size="small"
                >
                  一 一
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!---->
          <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!---->
        </div>
      </el-col>
    </el-row>
    <!---->
    <myModal
      :obj="objFour"
      :disabled="remindDateDisabled"
      @save="save"
      @close="clearForm"
    >
      <el-form
        v-if="objFour.show"
        ref="form"
        :model="nextForm"
        label-width="130px"
        :rules="rules"
        class="formDiv"
      >
        <el-form-item label="下次提醒时间：" prop="remindDate">
          <el-date-picker
            v-model="nextForm.remindDate"
            type="date"
            placeholder="请选择时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
    </myModal>
  </div>
</template>

<script>
import myModal from "@/components/Modal";
import { getList, processed, nextReminder } from "@/api/message";
import { formatAll } from "@/utils/common";
export default {
  components: { myModal },
  data() {
    return {
      formatAll,
      show: false,
      remindDateDisabled: true,
      disabled: true,
      tableData: [],
      total: 0,
      statusTxt: ["未处理", "已处理"],
      statusOptions: [
        {
          label: "未处理",
          value: 0,
        },
        {
          label: "已处理",
          value: 1,
        },
      ],
      objFour: {
        show: false,
        title: "选择下次提醒时间",
        width: "647px",
      },
      listQuery: {
        keyword: "",
        remindDateBegin: "",
        status: "",
        page: 1,
        limit: 10,
      },
      nextForm: {
        id: "",
        remindDate: "",
      },
      rules: {
        remindDate: [{ required: true, message: "下次提醒时间不能为空" }],
      },
    };
  },
  watch: {
    nextForm: {
      handler(newVal, oldVal) {
        var time = new Date();
        if (newVal.remindDate > time) {
          this.remindDateDisabled = false;
        } else {
          this.remindDateDisabled = true;
        }
      },
      deep: true,
    },
  },
  computed: {
    userID() {
      return this.$store.state.user.id;
    },
  },
  created() {
    this.page();
  },
  methods: {
    async page() {
      var res = await getList(this.listQuery);
      if (res.code === 200) {
        this.tableData = res.data.page.records;
        this.total = res.data.page.total;
      }
    },
    async screen() {
      await getList(this.listQuery);
      this.page();
    },
    async processedBtn(row, index) {
      var res = await processed(row.id);

      if (res.code == 200) {
        this.tableData.splice(index, 1);
      }
      await this.$store.dispatch("message/getMsg", this.userID);
      this.$root.$emit("changeCount");
      // this.page();
    },
    next(id) {
      this.nextForm.id = id;
      this.objFour.show = true;
    },
    async save() {
      await nextReminder(this.nextForm);
      this.objFour.show = false;
      this.clearForm();
      this.page();
    },
    clearForm() {
      this.nextForm.remindDate = "";
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.page();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.btn {
  cursor: default;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  background: #fff;
  overflow: hidden;
}
.btnScr {
  width: 100%;
  margin-bottom: 15px;
}
::v-deep .btnScr input {
  border-radius: 2px;
}
.btnScrright {
  border-radius: 2px;
  margin-top: -15px;
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.mtright {
  margin-right: 5px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 56px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 56px;
  line-height: 66px;
}
::v-deep .el-upload__text {
  line-height: initial;
  color: #cacaca;
  margin-top: -10px;
  font-size: 12px;
}
.right10 {
  margin-left: 10px;
}
.right20 {
  margin-left: 20px;
}
::v-deep .itxt label {
  font-weight: normal;
  font-size: 12px;
}
::v-deep .itxt {
  margin-bottom: 15px;
}
::v-deep .itxtactive label {
  color: #5ac6b7;
}
.borbtoonline {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: -15px;
}
.bortopline {
  margin-top: 15px;
}
.borbtoonline .el-form-item {
  margin-bottom: 10px;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
.rowPda {
  padding-right: 10px;
}

.mytableBor {
  border: 1px solid #b4b4b4;
  width: 100%;
  margin-bottom: 20px;
  table-layout: fixed;
  .s1 {
    width: 150px;
  }
  .s2 {
    width: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    label {
      margin-bottom: 10px;
    }
    label:last-child {
      margin-bottom: 0px;
    }
  }
}
.mytableBor thead th {
  border-bottom: 0px solid #b4b4b4;
  text-align: center;
  border-right: 1px solid #b4b4b4;
  padding: 15px 0;
}
.mytableBor thead th:last-child {
  border-right: 0;
}
.mytableBor tbody tr {
  border-bottom: 1px solid #b4b4b4;
}
.mytableBor td {
  border-right: 1px solid #b4b4b4;
  text-align: center;
  padding: 15px 0;
  border-top: 1px solid #b4b4b4;
}
.mytableBor .s3 {
  width: 617px;
}
.mytableBor td:last-child {
  border-right: 0;
}
.mytableBor td.s2 p {
  margin: 0;
  padding: 0;
  text-align: left;
  width: 120px;
  margin: 0 auto;
  line-height: 30px;
}
.mytableBor td:last-child {
  border-right: 0;
}
.mytableBor td.s3 p {
  text-align: left;
  padding-left: 15px;
}
</style>

<style>
@media (min-width: 1200px) {
  .inputTop input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-moz-placeholder,
  textarea:-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input::-moz-placeholder,
  textarea::-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .grey {
    color: #ccc !important;
  }
}
.el-checkbox {
  margin-right: 0;
  width: 110px;
  text-align: left;
}
</style>

